import React, { Component } from 'react';
import { Empty } from 'antd';
import echarts from 'echarts/lib/echarts';
//导入折线图
// import 'echarts/lib/chart/line';  //折线图是line,饼图改为pie,柱形图改为bar
// import 'echarts/lib/component/tooltip';
// import 'echarts/lib/component/title';
// import 'echarts/lib/component/legend';
// import 'echarts/lib/component/markPoint';
import ReactEcharts from 'echarts-for-react';
import { joinDimensionField, formatterUnitOfData, joinDimensionField_stock } from '@/utils/utils';
import { TaobaoOutlined } from '@ant-design/icons';
import styles from '../../../index.less';

import { percentage } from 'bizcharts/lib/utils';

const symbolImg = 'image://' + require('@/assets/men.png');

export default class PictorialBar extends Component {
  constructor() {
    super();
    this.state = {
      typeValue: [],
      value: {},
      total: 0,
      percent: [],
    };
    this.isShown = true
  }

  componentWillMount() {
    //主题的设置要在willmounted中设置
    // echarts.registerTheme('Imooc', echartTheme);
  }

  componentWillReceiveProps(nextProps) {
    const { data = [], staticts, params,dataType } = nextProps;
    //params:{
    //   purpose: (6)["商品房", "住宅", "商业", "办公", "车位", "其他"]
    //   region: []
    //   staticts: (2)["面积", "套数"]
    //   __proto__: Object
    // }
    let value = {};
    let typeValue = [];
    let total = 0;
    let percent = [];

    params.staticts.map((item) => {
      value[item] = [];
    });

    const result = dataType == '1' ? joinDimensionField('new', params.staticts) : joinDimensionField_stock(params.staticts); //[new_square/new_area]
    const position = result[staticts] ? result[staticts][0] : 'new_square'; //变量名
    const _percent = result[staticts] ? result[staticts][0] + '_percent' : 'new_square_percent'; //百分比变量名

    data.map((item) => {
      typeValue.push(item.born_type);
      if (value[staticts]) {
        value[staticts].push(parseFloat(item[position]));
        percent.push(parseFloat(item[_percent]).toFixed(1));
        total += Number(item[position]);
      }
    });

    this.setState({
      typeValue,
      value,
      total,
      percent,
    });
  }

  //数据类型
  //mount  number 买受人总数  作为x轴最大值maxDate
  //hjInformation  []    户籍信息  [{type:'本地',value:100},{type:'本地',value:100},{type:'本地',value:100}]
  //处理拆分  type、value提取成两个单独[]  一个给yAxis  一个给series

  getOption = (types, values, totals, percents) => {
    const { staticts } = this.props;
    let option = {
      tooltip: {
        // formatter: "{b0}:{c0}"
        formatter: (item) => {
          const { value, unit } = formatterUnitOfData(staticts, item.value);
          const template = `
          <div class=${styles.tooltip}>
            <p>${item.name}</p>
            <div class=${styles.content}>
                <span class=${styles.circle} style="background: #01c3df"></span>
                ${staticts}:
                <span class=${styles.amount}>
                  ${value + unit}
                </span>
            </div>
          </div>
          `;
          return template;
        },
      },
      xAxis: {
        show: false,
        max: totals,
        splitLine: { show: false },
        offset: 0,
        axisLine: {
          lineStyle: {
            color: '#999',
          },
        },
        axisLabel: {
          margin: 10,
        },
      },
      yAxis: {
        show: false,
        data: types,
        inverse: true,
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: {
          margin: 10,
          color: '#999',
          fontSize: 16,
        },
      },
      grid: {
        top: 'middle',
        height: 130,
        left: 0,
        right: 75,
      },
      series: [
        {
          // current data
          type: 'pictorialBar',
          symbol: symbolImg,
          symbolRepeat: 'fixed',
          symbolMargin: '1%',
          symbolClip: true,
          symbolSize: 30,
          symbolBoundingData: totals,
          data: values,

          z: 10,
        },
        {
          // full data
          type: 'pictorialBar',
          itemStyle: {
            normal: {
              opacity: 0.2,
            },
          },
          label: {
            show: true,
            formatter: function (params) {
              return `${params.name} :\n${((params.value / totals) * 100).toFixed(1)}%`;
            },
            position: 'right',
            offset: [10, 0],
            color: '#01c3df',
            fontSize: 16,
          },
          // width:'100%',
          animationDuration: 0,
          symbolRepeat: 'fixed',
          symbolMargin: '1%',
          symbol: symbolImg,
          symbolSize: 30,
          symbolBoundingData: totals,
          data: values,
          z: 5,
        },
      ],
    };
    return option;
  };

  render() {
    const { typeValue, value, total, percent } = this.state;
    const { staticts, purpose,showPic } = this.props;
    // console.log(typeValue, value, total, percent, staticts);
    const isEmpty = value[staticts] && value[staticts].every(item => !item)
    return (
      <>{
        <>
          {!showPic||isEmpty ? (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          ) : (
              <>
                {staticts === '面积' && (
                  <ReactEcharts
                    style={{ height: '100%' }}
                    option={this.getOption(typeValue, value[staticts], total, percent)}
                    theme="Imooc"
                  />
                )}
                {staticts === '套数' && (
                  <ReactEcharts
                    style={{ height: '100%' }}
                    option={this.getOption(typeValue, value[staticts], total, percent)}
                    theme="Imooc"
                  />
                )}
              </>
            )}
        </>}
      </>
    );
  }
}
